<template>
  <div class="container">
    <a-layout>
      <a-layout-sider width="200">
        <div class="sider-header"></div>
        <!-- 侧边栏菜单 -->
        <mesMenu></mesMenu>
      </a-layout-sider>

      <a-layout>
        <a-layout-header>
          <!-- 头部区域 -->
          <mesHeader></mesHeader>
        </a-layout-header>
        <!-- 内容主体区域 -->
        <a-layout class="content">
          <a-row>
            <a-col :span="22">
              <a-breadcrumb class="breadcrumb">
                <a-icon style="margin-right:10px" type="environment" />
                <a-breadcrumb-item
                  v-for="(item, index) in breadList"
                  :key="index"
                  >{{ item }}
                </a-breadcrumb-item>
              </a-breadcrumb>
            </a-col>
            <a-col :span="2">
              <a-popconfirm
                v-if="breadList.length > 2"
                cancelText="取消"
                okText="确定"
                title="确定返回吗?"
                @confirm="() => handleReturn()"
              >
                <a-button type="primary">返回上一页</a-button>
              </a-popconfirm>
            </a-col>
          </a-row>
          <a-layout-content>
            <keep-alive>
              <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!$route.meta.keepAlive"></router-view>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import mesMenu from "./components/mesMenu";
import mesHeader from "./components/mesHeader";
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
import { createNamespacedHelpers } from "vuex";

const { mapMutations } = createNamespacedHelpers("menu/");
const { mapState } = createNamespacedHelpers("menu/");
export default {
  name: "board",
  components: {
    mesMenu,
    mesHeader
  },
  data() {
    return {
      locale: zh_CN
    };
  },
  methods: {
    ...mapMutations(["setPageId"]),
    ...mapState(["menuLists"]),
    handleReturn() {
      this.$router.go(-1);
    }
  },
  computed: {
    pageId() {
      return this.$store.state.menu.pageId;
    },
    breadList() {
      return this.$store.state.menu.breadList;
    }
  },
  watch: {
    "$route.path": function(newVal) {
      if (newVal) {
        this.setPageId(newVal);
      }
    }
  },
  created() {
    this.setPageId(this.$route.path);
  },
  mounted() {}
};
</script>

<style lang="less" scoped="scoped">
@import "./index.less";
</style>
